<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <!-- <script src="./js/data.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> -->
    <script src="./js/echarts.js"></script>
    <script src="./js/theme.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    // 初始化
    const chart = echarts.init(
      document.getElementById("chart"), // 容器ID
      "westeros" // 主题
    );
    // 设置
    chart.setOption({
      title: {
        text: "年度销售额",
        textStyle: {
          fontSize: 12,
          color: "#666",
        },
        left: 25,
        top: 20,
      },
      xAxis: {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        // 刻度线
        axisTick: {
          alignWithLabel: true, // X轴中间的刻度线和柱状图对齐
          lineStyle: {
            color: "#999",
          },
        },
        // X轴线
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
        // 文字
        axisLabel: {
          color: "#333",
        },
      },
      yAxis: {
        // Y轴线
        axisLine: {
          show: true, // 轴线
          // onZero: false // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
        },
        // Y轴刻度
        axisTick: {
          show: false, // Y轴刻度隐藏
        },
        // 分割线
        splitLine: {
          lineStyle: {
            type: "dotted", // 虚线
            color: "#eee", // 颜色
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: "35%",
          data: [200, 250, 300, 350, 300, 250, 200, 250, 300, 350, 300, 250],
          itemStyle: {
            // LinearGradient前四个分参数别代表右，下，左，上，数值0-1
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(4, 227, 157,1)",
              },
              {
                offset: 1,
                color: "rgba(3, 133, 228,0.05)",
              },
            ]),
          },
        },
      ],
      // color: ['red'],
      grid: {
        top: 70,
        bottom: 25,
        left: 60,
        right: 60,
      },
    });
  </script>
</html>
